<template>
	<view>
		<uni-forms ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="customFormData">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" required name="age">
				<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			
		</uni-forms>
		<button type="primary" @click="submit('customForm')">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customFormData: {
					age: '',
					name: ''
				},
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					}
				}
			}
		},
		methods: {
			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		
	}
</script>

<style>

</style>